<template>
  <div class="app-container">
    <!-- 顶部导航栏 -->
    <Navbar />

    <!-- 主内容区 -->
    <div class="main-content">
      <!-- 侧边栏（仅在桌面端显示） -->
      <div class="sidebar-container" v-if="isDesktop">
        <Sidebar />
      </div>

      <!-- 内容区域 -->
      <div class="content-wrapper">
        <router-view />
      </div>
    </div>

    <!-- 页脚 -->
    <Footer />
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue';
import { useRoute } from 'vue-router';
import Navbar from './components/common/Navbar.vue';
import Sidebar from './components/common/Sidebar.vue';
import Footer from './components/common/Footer.vue';

// 响应式布局 - 监听窗口宽度
const windowWidth = ref(window.innerWidth);
const isDesktop = computed(() => windowWidth.value >= 1024);

// 监听路由变化（可用于页面滚动控制或其他全局状态）
const route = useRoute();
watch(
  () => route.path,
  (newPath) => {
    console.log('路由变化:', newPath);
    // 页面滚动到顶部
    window.scrollTo(0, 0);
  }
);

// 窗口大小变化事件
const handleResize = () => {
  windowWidth.value = window.innerWidth;
};

onMounted(() => {
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});
</script>

<style scoped>
.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-content {
  display: flex;
  flex: 1;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  gap: 20px;
}

.sidebar-container {
  flex: 0 0 280px;
}

.content-wrapper {
  flex: 1;
  min-width: 0; /* 防止内容溢出 */
}

/* 移动端布局 */
@media (max-width: 1023px) {
  .main-content {
    flex-direction: column;
    padding: 10px;
  }
  
  .sidebar-container {
    display: none; /* 在移动端隐藏侧边栏 */
  }
}
</style>